<template>
    <div class="home-classic">
        <h3>热门歌单</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item,index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.cover_url_small" radius="10" />
                        <span>{{item.access_num | numFilter(1)}}万</span>
                    </div>
                    <span>{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {betterScrollHorizontal} from "../../common/betterScroll"
export default {
  data(){
    return {
        listData: [],
        id:59,
        pageNo:1,
        pageSize:6
    };
  },
  created(){
    this.getData(this.id,this.pageNo,this.pageSize)
  },
  methods: {
    //获取推荐歌单数据
    getData(id,pageNo,pageSize) {
        this.$request('get', '/playlist/hot',{
            id,
            pageNo,
            pageSize
        }).then(res => {
            //console.log(res);
            if (res.result == 100) {
                this.listData = res.data.list
            }
            //this.betterScrollHorizontal(this.listData.length, 10);
            betterScrollHorizontal(
                    this,
                    this.$refs.wrapper,
                    this.$refs.content,
                    this.listData.length,
                    10)
                });
        },
    },
    // filters:{
    //     numFilter(value, num){
    //         return parseFloat(value/10000).toFixed(num) 
    //     }
    // }
};
</script>

<style>
    .wrapper {
    width: 100%;
    overflow: hidden;
}
ul.content>li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
    /**垂直方向的对齐方式 */
}
ul.content>li * {
    margin: 0 0.1rem;
}

.cover {
    position: relative;
}
.cover>span {
    position: absolute;
    right: 0.2rem;
    bottom: 0.4rem;
    color: white;
    font-size: 14px;
    border-radius: 1rem;
    width: 5rem;
    display: inline-block;
    background-color: burlywood;
}
.home-classic>h3 {
    text-align: left;
    margin-left: 10px;
}
</style>